<template>
  <view class="container">
    <!-- 顶部搜索栏 -->
    <view class="header">
      <SearchBar placeholder="搜索新鲜水果" @search="onSearch" />
    </view>

    <!-- 轮播图 -->
    <view class="banner">
      <u-swiper
        :list="bannerList"
        keyName="image_url"
        :autoplay="true"
        :interval="3000"
        height="200"
        radius="10"
        :indicator-dots="true"
        indicator-pos="bottomCenter"
      ></u-swiper>
    </view>

    <!-- 分类导航 -->
    <!-- <view class="category-nav">
      <view class="nav-item" v-for="(item, index) in categories" :key="index">
        <image :src="item.icon" mode="aspectFit" />
        <text>{{ item.name }}</text>
      </view>
    </view> -->

    <!-- 热销商品区域 -->
    <view class="hot-section">
      <view class="section-header">
        <text class="title">热销水果</text>
        <text class="more" @click="navigateToCategory">查看更多 ></text>
      </view>
      
      <view class="product-grid">
        <view 
          class="product-card" 
          v-for="(item, index) in hotProductList" 
          :key="item.id"
          @click="openDetail(item)"
        >
          <image :src="item.img_url " mode="aspectFill" />
          <view class="product-info">
            <text class="name">{{ item.title  }}</text>
            <view class="specs">
              <text class="unit" v-if="item.unit">{{ item.unit }}</text>
              <text class="quality" v-if="item.quality">{{ item.quality }}</text>
            </view>
            <text class="description">{{ item.description }}</text>
            <view class="bottom">
              <text class="price">￥{{ item.price }}</text>
              <text class="sales">已售{{ item.number  }}+</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 加载状态 -->
    <view v-if="loading" class="loading">
      <uni-load-more status="loading" iconType="circle"></uni-load-more>
      <text>加载中...</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import SearchBar from '@/components/SearchBar.vue'
import { useHomeStore } from '@/store/homeStore'

// 使用 homeStore
const homeStore = useHomeStore()

// 计算属性获取数据
const bannerList = computed(() => homeStore.getBannerList)
const hotProductList = computed(() => homeStore.getHotProductList)
const loading = computed(() => homeStore.isLoading('banners') || homeStore.isLoading('hotProducts'))

// 搜索处理
const onSearch = (keyword) => {
  uni.navigateTo({
    url: `/pages/classes/index?keyword=${keyword}`
  })
}

// 跳转到分类页面
const navigateToCategory = () => {
  uni.switchTab({
    url: '/pages/classes/index'
  })
}

// 打开商品详情
const openDetail = (item) => {
  if (!item.id) {
    uni.showToast({
      title: '商品信息不完整',
      icon: 'none'
    })
    return
  }
  uni.navigateTo({
    url: `/pages/classes/components/product-detail?detailId=${item.id}`
  })
}

// 初始化数据
const initHomeData = async () => {
  try {
    await homeStore.refreshHomeData()
  } catch (error) {
    uni.showToast({
      title: '加载数据失败',
      icon: 'none'
    })
  }
}

onMounted(() => {
  initHomeData()
})
</script>

<style lang="scss" scoped>
@import '@/styles/mixins.scss';
@import '@/styles/variables.scss';

.container {
  min-height: 100vh;
  background-color: $bg-color;
  padding-bottom: $spacing-md;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: linear-gradient(to right, #00b578, #07c160);
  padding: $spacing-sm $spacing-md;
}

.banner {
  margin-top: 135rpx;
  padding: 20rpx;
  
  :deep(.u-swiper) {
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  }
}

// .category-nav {
//   display: flex;
//   justify-content: space-around;
//   padding: 30rpx 20rpx;
//   background-color: #fff;
//   margin: 20rpx;
//   border-radius: 16rpx;
//   box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

//   .nav-item {
//     display: flex;
//     flex-direction: column;
//     align-items: center;
    
//     image {
//       width: 80rpx;
//       height: 80rpx;
//       margin-bottom: 12rpx;
//     }
    
//     text {
//       font-size: 24rpx;
//       color: #333;
//     }
//   }
// }

.hot-section {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    margin-bottom: 20rpx;
    
    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: $text-color;
      position: relative;
      padding-left: 20rpx;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 6rpx;
        height: 30rpx;
        background-color: #00b578;
        border-radius: 3rpx;
      }
    }
    
    .more {
      font-size: 24rpx;
      color: $text-color-light;
    }
  }

  .product-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    
    .product-card {
      width: calc(50% - 10rpx); // 左右两列，中间留有间隙
      background: $bg-color-white;
      border-radius: $radius-md;
      overflow: hidden;
      @include box-shadow;
      transition: transform 0.2s;
      margin-bottom: 20rpx;
      display: flex;
      flex-direction: column; // 修改为纵向排列
      
      // 优化错位效果
      &:nth-child(odd) {
        transform: translateY(15rpx);
      }
      
      &:nth-child(even) {
        transform: translateY(-15rpx);
      }
      
      &:active {
        transform: scale(0.98);
      }

      image {
        width: 100%;
        height: 240rpx;
        object-fit: cover;
      }

      .product-info {
        padding: $spacing-sm;
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 240rpx; // 设置最小高度，保持卡片大小一致

        .name {
          font-size: 28rpx;
          font-weight: bold;
          color: $text-color;
          margin-bottom: 6rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .specs {
          margin: $spacing-xs 0;
          display: flex;
          flex-wrap: wrap;
          gap: 6rpx;
          
          .unit, .quality {
            font-size: 24rpx;
            color: $text-color-secondary;
            background-color: $bg-color-light;
            padding: 2rpx 10rpx;
            border-radius: $radius-sm;
            display: inline-block;
          }
        }

        .description {
          font-size: 24rpx;
          color: $text-color-light;
          margin-bottom: 12rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2; // 限制显示2行
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: 1.4;
          height: 67.2rpx; // 2行文字的高度 = 行高 * 字体大小 * 2
          word-break: break-all;
        }

        .bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: auto;
          padding-top: 8rpx;

          .price {
            font-size: 32rpx;
            color: #ff8800;
            font-weight: bold;
          }

          .sales {
            font-size: 22rpx;
            color: $text-color-light;
          }
        }
      }
    }
  }
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx 0;
  
  text {
    font-size: 28rpx;
    color: $text-color-light;
    margin-top: 20rpx;
  }
}
</style>
